import { StyleSheet, Text, TouchableOpacity, Image, Linking, View } from 'react-native'
import React, { useState, useImperativeHandle } from 'react'

import icon_unselected from '@/assets/images/icon_unselected.png'
import icon_selected from '@/assets/images/icon_selected.png'

export interface Ref {
  /** 协议是否勾选 */
  selected: boolean
}
interface Props {
  onSelected: (state: boolean) => void
  children?: React.ReactNode
}
const AgreementLink = React.forwardRef<Ref, Props>((props, ref) => {
  // 勾选协议
  const [selected, setSelected] = useState(false)
  // 点击勾选的回调
  const onChangeSelected = () => {
    setSelected(!selected)
    props.onSelected(!selected)
  }
  // 暴露属性
  useImperativeHandle(ref, () => {
    return {
      /** 协议是否勾选 */
      selected
    }
  })

  return (
    <View style={styles.agreementBox}>
      {/* 用户协议 */}
      <TouchableOpacity style={styles.agreementBtn} activeOpacity={0.7} onPress={onChangeSelected}>
        <Image
          source={selected ? icon_selected : icon_unselected}
          style={styles.circleIcon}
        ></Image>
        <Text style={styles.agreementTxt}>我已经阅读并同意</Text>
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => {
            Linking.openURL('https://www.baidu.com')
          }}
        >
          <Text style={styles.agreementLink}>《用户协议》《隐私政策》</Text>
        </TouchableOpacity>
      </TouchableOpacity>
    </View>
  )
})

export default AgreementLink

const styles = StyleSheet.create({
  agreementBox: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  agreementBtn: {
    flexDirection: 'row'
  },
  circleIcon: {
    width: 18,
    height: 18,
    marginRight: 5
  },
  agreementTxt: {
    fontSize: 12
  },
  agreementLink: {
    color: '#2d4063',
    fontSize: 12
  }
})
